@import 'com/sass/_utils-wap';
@import 'com/sass/_reset-wap';
@import 'compass/css3';
$icon:sprite-map("stu/spell/spr/*.png",$spacing:10px);
body{
    color: #333;
}
section{
    min-height: 2930px/$ppr;
    background: url(../../../../images/stu/spell/bg.png) no-repeat  bottom #81D1FC;
    background-size: 720px/$ppr 1182px/$ppr;
    position: relative;
    .cloud{
        width: 100%;
        background: url(../../../../images/stu/spell/cloud.png) repeat-y;
        background-size: 720px/$ppr auto;
        height: 649px/$ppr;
        position: absolute;
        bottom: 460px/$ppr;
        left: 0;
        &.c2{
            bottom: 1200px/$ppr;
        }
        &.c3{
            bottom: 1900px/$ppr;
        }
    }
    .tree{
        width: 100%;
        background: url(../../../../images/stu/spell/tree.png) no-repeat;
        background-size: 605px/$ppr 648px/$ppr;
        height: 649px/$ppr;
        position: absolute;
        bottom: 719px/$ppr;
        left: 55px/$ppr;
        z-index: 3;
        &.t2{
            bottom: 1364px/$ppr;
        }
        &.t3{
            bottom: 2008px/$ppr;
        }
    }
} 
.fruitlist{
    width: 340px/$ppr;
    position: absolute;
    bottom: 170px/$ppr;
    left: 185px/$ppr;
    li{
        width: 230px/$ppr;
        text-align: center;
        position: absolute;
        bottom: 0;
        em{
            @include icon($icon,'fruit_07');
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -33px/$ppr;
            bottom: 50px/$ppr;
            &.on{
                @include icon($icon,'fruit_15');
            }
        }
        i{
            font-size: 36px/$ppr;
            color: #fff;
            font-weight: bold;
            -webkit-text-stroke: 1px #4c8000;
            display: none;  
        }
        a{
            width: 90px/$ppr;
            height: 40px/$ppr;
            line-height: 40px/$ppr;
            font-size: 28px/$ppr;
            color: #f0f0f0;
            background:#4a7e00;
            border-radius: 10px/$ppr;
            display: inline-block;
            margin-top: 80px/$ppr;
            display: none;
            &.study{
                margin-right: 10px/$ppr;  
            }
        }
        &:nth-child(2n){
            right: -30px/$ppr;
        }
        &:nth-child(2){
            bottom: 55px/$ppr;
        }
        &:nth-child(3){
            bottom: 165px/$ppr;
        }
        &:nth-child(4){
            bottom: 225px/$ppr;
        }
        &:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }&:nth-child(2){
            bottom: 55px/$ppr;
        }
    }
}
